<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="inputWrapItem" v-for="(item,index) in shopGoodsSpecsList" :key="index">
        <div class="sizeItem">
          <img :src="$imgUrl+item.imageUrl" alt="" class="sizeImg" />
          <div class="sizeText">
            <p class="sizeName">{{item.title}}</p>
            <p class="sizeNum">￥{{item.price}} <em class="haveNum">库存:{{item.stock}}</em></p>
          </div>
        </div>
        <div class="eidorIconRight">
          <img src="@/assets/eidtor1.png" alt="" class="eidtoricon" />
          <img src="@/assets/eidtor2.png" alt="" class="eidtoricon eidtoricon2" />
        </div>
      </div>
    </div>
    <div class="nextButton" @click="jumpAddSize">
        <img src="@/assets/add.png" alt="" class="add" />
        添加规格
    </div>
  </div>
</template>

<script>
import axios from "axios"; // 引入axios
import { apiPlatformTypeList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
        fromId:this.$route.query.fromId,//从增加规格回来的0，编辑回来的为1
        shopGoodsSpecsList:'',//规格
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.shopGoodsSpecsList = JSON.parse(sessionStorage.getItem("shopGoodsSpecsList"))
    console.log('添加的规格列表',this.shopGoodsSpecsList)
  },
  methods: {
    //下一步
    jumpAddSize() {
      this.$router.push({
        path: "/pages/bAddSize",
        query: {
          //传递参数
          fromId:0,//跳转新增规格页面0，编辑的话为1
        },
      });
    },
  },
  created() {},
  components: {},
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 20px;
}
.inputWrapItem {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.sizeItem {
  background: #f2f4fa;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 15px;
  float: left;
  width: 75%;
  border-radius: 20px;
}
.sizeImg {
  width: 50px;
  height: 40px;
  float: left;
  margin: 10px;
}
.sizeText {
  float: left;
  font-size: 10px;
  font-weight: 300;
  color: #999999;
  margin-top: 13px;
}
.sizeName {
  font-size: 13px;
  font-weight: 600;
  color: #181818;
  margin-bottom: 3px;
}
.sizeNum {
}
.haveNum {
}
.eidorIconRight {
  float: right;
  margin-top: 40px;
}
.eidtoricon {
  width: 14px;
  height: 14px;
  
}
.eidtoricon2{
  margin-left: 20px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #181818;
  text-align: center;
  position: fixed;
  bottom: 12px;
  left: 2.5%;
}
.add{
    width: 12px;
}
</style>
